<template>
<div>
  <List></List>
  <router-link to="/users/add" @click.native="show()"  class=" icon-size-margin">
    <span v-if="linkFlag===true"><i class="el-icon-minus"></i></span>
    <span v-if="linkFlag===false"><i class="el-icon-plus"></i></span>
  </router-link>
  <router-view />
</div>
</template>

<script>
import List from "./List";
export default {
  name: "Users",
  components:{List},//组件复用
  data(){
    return{
      linkFlag:false,
    }
  },
  methods:{
    show(){ //可以控制子路由与父路由的双向点击切换
      if(this.linkFlag===true){
        this.linkFlag=!this.linkFlag;
        this.$router.push('/users');
      }else {
        this.linkFlag=!this.linkFlag;
      }
    },
  },
  // 监听,当路由发生变化的时候执行
  watch:{
    $route:{
      handler(val,oldval){
        if (val.path==='/users'){
          this.linkFlag=false;
        }
      },
      // 深度观察监听
      deep: true
    }
  }
}
</script>

<style scoped>

</style>
